<template>
  <div>
    <el-input placeholder="请输入手机号" v-model="mobile"></el-input>
    <img :src="imageurl" alt="" width="250px" height="150px" @click="getImageCode"/>
    <el-input placeholder="请输入图片验证码" v-model="image"></el-input>
    <el-button @click="hq" :disabled="flag">{{ res1 }}</el-button>
    <el-input placeholder="请输入手机验证码" v-model="smsmobile"></el-input>
    <el-input placeholder="请输入密码" v-model="password"></el-input>
    <el-select v-model="roleid" placeholder="请选择角色">
    <el-option
      v-for="item in roles"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
  <el-button @click="dl">登录/注册</el-button>
  <a :href="wburl">三方登录</a>
  </div>
</template>

<script>
import { v4 as uuid } from "uuid";
export default {
  data() {
    return {
      uuid1: "",
      imageurl: "",
      mobile: "",
      image: "",
      password:"",
      roleid:"",
      roles:"",
      smsmobile:"",
      flag:false,
      res1:"获取手机验证码",
      time:60,
      wburl:""
    };
  },
  mounted() {
    this.getImageCode();
    this.getroles()
    this.getwb()
  },
  methods: {
    getImageCode() {
      this.uuid1 = uuid();
      this.imageurl = "http://127.0.0.1:8000/getImageCode?uuid=" + this.uuid1;
    },
    hq() {
      if (this.mobile == "") {
        alert("手机号不能为空");
      } else {
        var reg = /^1[3-9]\d{9}$/;
        if (!reg.test(this.mobile)) {
          alert("手机号格式错误");
        } else {
          var data = {
            mobile: this.mobile,
            uuid: this.uuid1,
            image: this.image,
          };
          this.axios.post("/sms_code", data).then((res) => {
            if(res.data.code == 200){
              alert(res.data.msg);
              var s = setInterval(() =>{
                if(this.time == 0){
                  clearInterval(s)
                  this.time = 60
                  this.res1 = "获取手机验证码"
                  this.flag = false
                }else{
                  this.time--
                  this.res1 = this.time + "秒"
                  this.flag = true
                }
              },1000)

            }else{
              alert(res.data.msg);
            }
            
          });
        }
      }
    },
    getroles(){
      this.axios.get("/getroles").then(res =>{
        this.roles = res.data.data
      })
    },
    dl(){
      var data = {"mobile":this.mobile,"password":this.password,"roleid":this.roleid,"sms_mobile":this.smsmobile}
      this.axios.post("/login",data).then(res =>{
        if(res.data.code == 200){
          alert(res.data.msg)
          localStorage.setItem("token",res.data.token)
          localStorage.setItem("userid",res.data.userid)
          localStorage.setItem("mobile",res.data.mobile)
        }else{
          alert(res.data.msg)
        }
      })
    },
    getwb(){
      this.axios.get("/wburl").then(res =>{
        this.wburl = res.data.url
      })
    }
  },
};
</script>

<style>
</style>
